<template>
  <ele-page>
    <ele-card header="基础用法">
      <ele-steps
        :active="active"
        finish-status="success"
        :items="[
          { title: '第一步', description: '填写转账信息' },
          { title: '第二步', description: '确认转账信息' },
          { title: '第三步', description: '转账成功' }
        ]"
        :align-center="!!alignCenter"
      />
      <div style="margin-top: 28px; display: flex; align-items: center">
        <el-button @click="handlePrev">上一步</el-button>
        <el-button type="primary" @click="handleNext">下一步</el-button>
        <div style="margin-left: 12px">
          <el-checkbox
            v-model="alignCenter"
            :true-value="1"
            :false-value="0"
            label="居中"
          />
        </div>
      </div>
    </ele-card>
    <ele-card header="紧凑版">
      <ele-steps
        :active="active"
        finish-status="success"
        type="inline"
        :items="[
          { title: '第一步', description: '填写转账信息' },
          { title: '第二步', description: '确认转账信息' },
          { title: '第三步', description: '转账成功' }
        ]"
      />
    </ele-card>
    <ele-card header="竖直方向">
      <div style="height: 320px">
        <ele-steps
          :active="active"
          finish-status="success"
          direction="vertical"
          :items="[
            { title: '第一步', description: '填写转账信息' },
            { title: '第二步', description: '确认转账信息' },
            { title: '第三步', description: '转账成功' }
          ]"
        />
      </div>
    </ele-card>
    <ele-card header="自定义图标">
      <div style="margin-bottom: 40px">
        <el-button @click="handlePrev">上一步</el-button>
        <el-button type="primary" @click="handleNext">下一步</el-button>
      </div>
      <ele-steps
        :active="active"
        type="inline"
        :items="[
          { title: '账号注册', icon: markRaw(UserFilled) },
          { title: '邮箱验证', icon: markRaw(Checked) },
          { title: '注册完成', icon: markRaw(SuccessFilled) }
        ]"
        :style="{
          '--ele-step-icon-size': '24px',
          '--ele-step-line-height': '24px'
        }"
      />
      <ele-steps
        :active="active"
        :align-center="true"
        :items="[
          { title: '账号注册', icon: markRaw(UserFilled) },
          { title: '邮箱验证', icon: markRaw(Checked) },
          { title: '注册完成', icon: markRaw(SuccessFilled) }
        ]"
        :style="{
          '--ele-step-icon-size': '24px',
          '--ele-step-line-height': '24px',
          margin: '68px 0 18px 0'
        }"
      />
    </ele-card>
    <ele-card>
      <template #header>
        <span>时间线(自动S形换行)</span>
        <el-badge
          value="New"
          style="display: inline-flex; font-weight: normal; margin-left: 4px"
        />
      </template>
      <ele-timeline :data="timelineData" style="margin-top: 28px" />
    </ele-card>
    <ele-card>
      <template #header>
        <span>自定义内容</span>
        <el-badge
          value="New"
          style="display: inline-flex; font-weight: normal; margin-left: 4px"
        />
      </template>
      <ele-timeline :data="timelineData2" style="margin-top: 28px">
        <template #itemDescription="{ item }">
          <div v-if="item.time">{{ item.time }}</div>
          <div>科室：{{ item.department }}</div>
          <div>执行人：{{ item.executor }}</div>
        </template>
      </ele-timeline>
    </ele-card>
  </ele-page>
</template>

<script setup>
  import { ref, markRaw } from 'vue';
  import { UserFilled, Checked, SuccessFilled } from '@element-plus/icons-vue';

  defineOptions({ name: 'ExtensionSteps' });

  /** 选中步骤 */
  const active = ref(0);

  /** 居中 */
  const alignCenter = ref(0);

  /** 上一步 */
  const handlePrev = () => {
    if (active.value < 1) {
      active.value = 3;
      return;
    }
    active.value = active.value - 1;
  };

  /** 下一步 */
  const handleNext = () => {
    if (active.value > 2) {
      active.value = 0;
      return;
    }
    active.value = active.value + 1;
  };

  /** 数据 */
  const timelineData = ref([
    {
      key: 1,
      type: 'primary',
      title: '1 签署输血同意书'
    },
    {
      key: 2,
      type: 'primary',
      title: '2 申请单打印'
    },
    {
      key: 3,
      type: 'primary',
      title: '3 医嘱复核'
    },
    {
      key: 4,
      type: 'primary',
      title: '4 申请单送达'
    },
    {
      key: 5,
      type: 'primary',
      title: '5 输血科核收'
    },
    {
      key: 6,
      type: 'primary',
      title: '6 交叉配血'
    },
    {
      key: 7,
      title: '7 取血通知'
    },
    {
      key: 8,
      title: '8 输血医嘱开立'
    },
    {
      key: 9,
      title: '9 打印取血单'
    },
    {
      key: 10,
      title: '10 血袋出库'
    },
    {
      key: 11,
      title: '11 血袋接收'
    },
    {
      key: 12,
      title: '12 输血单核对'
    },
    {
      key: 13,
      title: '13 输血开始'
    }
  ]);

  /** 数据 */
  const timelineData2 = ref([
    {
      key: 1,
      type: 'primary',
      title: '1 签署输血同意书',
      time: '2024-06-18 14:57:00',
      department: '输血科',
      executor: '徐蕊'
    },
    {
      key: 2,
      type: 'primary',
      title: '2 申请单打印',
      time: '2024-06-18 14:58:00',
      department: '输血科',
      executor: '郭春梅'
    },
    {
      key: 3,
      type: 'primary',
      title: '3 医嘱复核',
      time: '2024-06-18 14:59:00',
      department: '肿瘤科',
      executor: '陆慧玲'
    },
    {
      key: 4,
      type: 'primary',
      title: '4 申请单送达',
      time: '2024-06-18 15:00:00',
      department: '肿瘤科',
      executor: '陆慧玲'
    },
    {
      key: 5,
      type: 'primary',
      title: '5 输血科核收',
      time: '2024-06-18 15:01:00',
      department: '南西9病区',
      executor: '陆慧玲'
    },
    {
      key: 6,
      type: 'danger',
      title: '6 交叉配血',
      time: '2024-06-18 15:02:00',
      department: '输血科',
      executor: '田永立'
    },
    {
      key: 7,
      title: '7 取血通知',
      time: '',
      department: '',
      executor: ''
    },
    {
      key: 8,
      title: '8 输血医嘱开立',
      time: '',
      department: '',
      executor: ''
    },
    {
      key: 9,
      title: '9 打印取血单',
      time: '',
      department: '',
      executor: ''
    },
    {
      key: 10,
      title: '10 血袋出库',
      time: '',
      department: '',
      executor: ''
    },
    {
      key: 11,
      title: '11 血袋接收',
      time: '',
      department: '',
      executor: ''
    },
    {
      key: 12,
      title: '12 输血单核对',
      time: '',
      department: '',
      executor: ''
    },
    {
      key: 13,
      title: '13 输血开始',
      time: '',
      department: '',
      executor: ''
    }
  ]);
</script>
